<template>
  <el-container>
    <el-container >
      <el-header>
        <el-row :gutter="17">
          <el-col :span="4">
            <el-input placeholder="请输入序列号或名称搜索" size="medium" prefix-icon="el-icon-search" v-model="terminalNumber"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input placeholder="请输入地址搜索" size="medium" prefix-icon="el-icon-search" v-model="terminalAddress"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="success" size="small" icon="el-icon-search" @click="queryDevices">查询</el-button>
            <el-button type="warning" size="small" icon="el-icon-refresh" @click="clearCondition">重置</el-button>
          </el-col>
          <el-col :span="9" :offset="1">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="openForm('save')">新增</el-button>
            <el-button type="info" size="small" icon="el-icon-bottom">导出</el-button>
            <el-button type="info" size="small" icon="el-icon-bottom">导入</el-button>
            <el-button type="warning" size="small" icon="el-icon-bottom" @click="updateAllDevice('2')">全部更新</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-table :data="devicesData.slice((currentPage-1)* pagesize, currentPage * pagesize)" style="width: 100%" height="98%" border :cell-style="{'text-align': 'center'}">
          <el-table-column type="expand" >
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="设备序列号">
                  <span>{{ props.row.f_terminal_number }}</span>
                </el-form-item>
                <el-form-item label="使用公司">
                  <span>{{ props.row.f_orgname }}</span>
                </el-form-item>
                <el-form-item label="设备状态">
                  <span>{{ props.row.f_online }}</span>
                </el-form-item>
                <el-form-item label="设备编号">
                  <span>{{ props.row.f_terminal_name}}</span>
                </el-form-item>
                <el-form-item label="设备电话">
                  <span>{{ props.row.f_phone }}</span>
                </el-form-item>
                <el-form-item label="设备地址">
                  <span>{{ props.row.f_address }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" size="small" icon="el-icon-edit" @click="openForm(props.row)">修改</el-button>
                  <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteDevice(props.row)">删除</el-button>
                  <el-button type="info" size="small" icon="el-icon-delete" @click="updateDevice(props.row, '2')">更新</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="f_terminal_number" label="设备序列号"></el-table-column>
          <el-table-column prop="f_orgname" label="使用公司"></el-table-column>
          <el-table-column prop="f_online" label="设备状态"></el-table-column>
<!--          <el-table-column prop="f_bank_name" label="使用银行"></el-table-column>-->
<!--          <el-table-column prop="f_phone" label="设备电话"></el-table-column>-->
          <el-table-column prop="f_address" label="设备地址"></el-table-column>
        </el-table>
        <el-dialog :title="dialogTitle" :visible.sync="dialogShow" append-to-body>
          <el-form :model="form" label-width="100px">
            <el-form-item label="序 列 号">
              <el-input v-model="form.f_terminal_number" placeholder="设备背部设备序列号，例：D1G029000000"></el-input>
            </el-form-item>
            <el-form-item label="使用公司">
              <el-input v-model="form.f_orgname"></el-input>
            </el-form-item>
            <el-form-item label="设备编号">
              <el-input v-model="form.f_terminal_name"></el-input>
            </el-form-item>
            <el-form-item label="负责电话">
              <el-input v-model="form.f_phone"></el-input>
            </el-form-item>
            <el-form-item label="设备地址">
              <el-input v-model="form.f_address" placeholder="设备负责人联系电话"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogShow = false">取 消</el-button>
            <el-button type="primary" @click="operateDevice">保 存</el-button>
          </div>
        </el-dialog>
      </el-main>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="devicesData.length">
      </el-pagination>
    </el-container>
  </el-container>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'

export default {
  name: 'DeviceManager',
  methods: {
    // 查询设备
    queryDevices () {
      // 组织查询条件
      let condition = 'f_state = \'正常\' '
      if (this.terminalNumber !== '') {
        condition += 'and f_terminal_number like \'%' + this.terminalNumber + '%\''
      }
      if (this.terminalAddress !== '') {
        condition += 'and f_address like \'%' + this.terminalAddress + '%\''
      }
      let that = this
      // 查询
      this.axios.post('/sql/getDevices', {'data': {'condition': condition}})
        .then((response) => {
          that.devicesData = response.data
        }).catch((error) => {
          that.$message.error('数据加载失败!错误码:PAY10086' + error)
        })
    },
    handleSizeChange (size) {
      console.log(size, 'size')
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      console.log(currentPage, 'currentPage')
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    // 重置搜索条件
    clearCondition () {
      this.terminalAddress = ''
      this.terminalNumber = ''
      this.queryDevices()
    },
    // 修改/删除弹出框
    openForm (row) {
      this.dialogShow = true
      if (row === 'save') {
        // 新增
        this.form = {}
        this.dialogTitle = '新增'
      } else {
        this.form = row
        this.dialogTitle = '修改'
      }
    },
    // 新增/修改设备
    operateDevice () {
      this.form.f_equipment_type = 'POS'
      this.form.f_state = '正常'
      this.form.f_online = '离线'
      let that = this
      this.axios.post('/entity/t_equipment', this.form)
        .then(function () {
          that.form = {}
          that.dialogShow = false
          that.$message({
            message: that.dialogTitle + '成功！',
            type: 'success'
          })
          // 刷新表单
          that.queryDevices()
        }).catch(function (error) {
          that.$message.error(that.dialogTitle + '错误, 错误码:' + error)
        })
    },
    // 删除设备
    deleteDevice (row) {
      this.$confirm('此操作将永久删除设备' + row.terminalNumber + ',是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let that = this
        row.f_state = '删除'
        this.axios.post('/logic/removeDevice', row)
          .then(function () {
            that.dialogShow = false
            that.$message({
              message: '删除成功！',
              type: 'success'
            })
            // 刷新表单
            that.queryDevices()
          }).catch(function (error) {
            that.$message.error(that.dialogTitle + '错误, 错误码:' + error)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateDevice (row, state) {
      console.log('测试测试', row)
      console.log('表数据', this.devicesData)
      let data = this.buildMessage(row, state)
      console.log('拼接后数据', data)
      this.axios.post('/logic/task', data)
        .then(value => {
          console.log('更新成功', value)
        })
    },
    buildMessage (row, state) {
      let data = {
        data: {
          tasks: [
            {
              sn: row.f_terminal_number,
              taskState: state
            }
          ]
        }
      }
      return data
    },
    updateAllDevice (state) {
      let updateInfo = {
        data: {
          tasks: [

          ]}
      }
      for (let index = 0; index < this.devicesData.length; index++) {
        const deviceInfo = this.devicesData[index]
        console.log('设备信息', deviceInfo)
        if (deviceInfo.f_online === '在线') {
          let info = {
            sn: deviceInfo.f_terminal_number,
            taskState: state
          }
          updateInfo.data.tasks.push(info)
        }
      }
      console.log('拼接后参数: ', updateInfo)
      this.axios.post('/logic/task', updateInfo)
        .then(value => {
          console.log('更新成功', value)
        })
    }

  },
  data () {
    return {
      // 查询条件-设备序列号
      terminalNumber: '',
      // 查询设备序列号-地址
      terminalAddress: '',
      // 新增修改弹出框
      dialogShow: false,
      // 弹出框标题
      dialogTitle: '',
      orgName: '',
      devicesData: [],
      pageSizeList: [13, 15, 20, 30],
      currentPage: 1, // 初始页
      pagesize: 13, //    每页的数据

      data: [{'children': [], 'id': '14155868', 'label': '农村信合', 'parentId': '14154267'}, {'children': [{'POSITION': '1', 'PARENTID': '7', 'SELFID': '14154268', 'label': '榆林', 'ID': '14154267'}], 'id': '7', 'label': '组织机构', 'parentId': '3'}, {'children': [{'POSITION': '2', 'PARENTID': '14154267', 'SELFID': '14155861', 'LABEL': '长安银行', 'ID': '14155860'}, {'POSITION': '4', 'PARENTID': '14154267', 'SELFID': '14155869', 'LABEL': '农村信合', 'ID': '14155868'}, {'POSITION': '6', 'PARENTID': '14154267', 'SELFID': '14155877', 'LABEL': '长安银行自助设备', 'ID': '14155876'}, {'POSITION': '1', 'PARENTID': '14154267', 'SELFID': '14155857', 'LABEL': '榆川天然气', 'ID': '14155856'}, {'POSITION': '3', 'PARENTID': '14154267', 'SELFID': '14155865', 'LABEL': '邮政银行', 'ID': '14155864'}, {'POSITION': '5', 'PARENTID': '14154267', 'SELFID': '14155873', 'LABEL': '建设银行自助设备', 'ID': '14155872'}, {'POSITION': '7', 'PARENTID': '14154267', 'SELFID': '14473225', 'LABEL': '招商银行', 'ID': '14473224'}], 'id': '14154267', 'label': '榆林', 'parentId': '7'}, {'children': [], 'id': '14155864', 'label': '邮政银行', 'parentId': '14154267'}, {'children': [], 'id': '14473224', 'label': '招商银行', 'parentId': '14154267'}],
      defaultProps: {
        children: 'children',
        label: 'LABEL'
      },
      form: {},
      terminalOrgNames: [
        {
          label: '测试1',
          value: '1'
        },
        {
          label: '测试12',
          value: '12'
        }
      ],
      formLabelWidth: '120px',
      selectValue: '1'
    }
  },
  mounted () {
    this.queryDevices()
    this.pagesize = this.pageSizeList[0]
  }
}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    line-height: 30px;
    text-align: center;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
